<template>
	<!-- 顶部搜索区域 -->
	<view class="search-box" :class="{left:isLeft}">
		<icon size="20" type="search"></icon>
		<input @focus="isLeft=true" @blur="isLeft=false" type="text" placeholder="搜索" />
	</view>
</template>

<script>
	export default {
		name: "searchBar",
		data() {
			return {
				isLeft: false,
			};
		}
	}
</script>

<style lang="less">
	.search-box {
		background-color: #fe2c4b;
		padding: 16rpx;
		position: relative;

		input {
			background-color: white;
			border-radius: 10rpx;
			height: 60rpx;
			padding-left: 360rpx;
			transition: .5s;
		}

		icon {
			position: absolute;
			left: 330rpx;
			top: 28rpx;
			transition: .5s;
		}

		// 解析完 才会编程 .search-box.left
		&.left {
			input {
				padding-left: 45rpx;
			}

			icon {
				left: 20rpx;
			}
		}
	}
</style>
